import Link from 'next/link'
import { withRouter } from 'next/router'
import { useState, useCallback } from 'react'
import { Layout, Icon, Input, Avatar, Tooltip, Dropdown, Menu } from 'antd'
import Container from './Containar.jsx'
import getConfig from 'next/config'
import { connect } from 'react-redux'
import { logout } from '../store/store'
//import axios from 'axios'

const { Header, Content, Footer } = Layout

const { publicRuntimeConfig } = getConfig()


function MyLayout ({ children, user, logout, router }) {

  const urlQuery = router.query && router.query.query

  const [search, setSearch] = useState(urlQuery || '')

  const handleSearchChange = useCallback(
    (event) => {
      setSearch(event.target.value)
    }, []
  )

  const handleOnSearch = useCallback(() => {
    router.push(`/search?query=${search}`)
  }, [search])

  const handleLogoOut = useCallback(
    () => {
      logout()
    },
    [logout],
  )
  /*   const handleGotoOAnth = useCallback(
      (e) => {
        e.preventDefault()
        axios.get(`/prepare-auth?url=${router.asPath}`)
          .then(resp => {
            if (resp.status === 200) {
              location.href = publicRuntimeConfig.OAUTH_URL
            } else {
              console.log('prepare anth failed', resp)
            }
          }).catch(err => console.log('prepare anth failed', err))
      },
      [],
    )
   */
  const githubIconStyle = {
    color: 'white',
    fontSize: 40,
    display: 'block',
    paddingTop: 10,
    marginRight: 20
  }
  const FooterStyle = {
    textAlign: "center",

  }

  const userDropDown = () => {
    return (
      <Menu>
        <Menu.Item>
          <a href="javacript:void(0)" onClick={handleLogoOut}>登出</a>
        </Menu.Item>
      </Menu>
    )
  }

  /* const Comp = ({ color, children, style }) => <div style={{ color, ...style }}>{children}</div> */

  return (
    <Layout>
      <Header>
        <Container renderer={<div className="header-inner" />}>

          <div className="herder-left">
            <div className="logo">
              <Link href="/">
                <Icon type="github" style={githubIconStyle} />
              </Link>
            </div>
            <div>
              <Input.Search
                placeholder="搜索仓库"
                value={search}
                onChange={handleSearchChange}
                onSearch={handleOnSearch}
              />
            </div>
          </div>
          <div className="header-right">

            <div className="user">
              {
                user && user.id ? (
                  <Dropdown overlay={userDropDown}>
                    <a href="/">
                      <Avatar size={40} src={user.avatar_url} />
                    </a>
                  </Dropdown>

                ) : (
                    <Tooltip title="点击进行登录">
                      <a href={`/prepare-auth?url=${router.asPath}`} >
                        <Avatar size={40} icon="user" />
                      </a>
                    </Tooltip>
                  )
              }

            </div>
          </div>

        </Container>
      </Header>
      <Content>
        <Container>
          {children}
        </Container>
      </Content>
      <Footer style={FooterStyle}>Develop by LD @ <a href="22031033@qq.com">22031033@qq.com</a></Footer>
      <style jsx>{`
      .header-inner{
        display:flex;
        justify-content:space-between;
      }
      .herder-left{
        display:flex;
        justify-content:flex-start;
      }
      .content{
        color:red;
      }
        `}</style>
      <style jsx global>{`
          #__next{
            height:100%;
          }
          .ant-layout{
            min-height:100%;
          }
          .ant-layout-header{
            padding-left:0;
            padding-right:0;
          }
          .ant-layout-content{
            background:#fff;
          }
          `}</style>
    </Layout >
  )
}

export default connect(function mapState (state) {
  return {
    user: state.user
  }
},
  function mapReducer (dispatch) {
    return {
      logout: () => dispatch(logout())
    }
  })(withRouter(MyLayout))
